import React, { FC } from 'react';
import { styled } from '@linaria/react';
import pick from 'lodash/pick';

interface Props {
  title?: string;
  padding?: string;
  border?: string;
  background?: string;
  style?: React.CSSProperties;
}

const Container = styled.div`
  background: #f5f7fa;
  &:last-of-type {
    padding-bottom: 32px;
  }
`;

const Title = styled.div`
  padding: 12px 8px 6px;
  color: #969696;
  font-size: 14px;
`;

const Content = styled.div<Pick<Props, 'background' | 'padding' | 'border'>>`
  border-right: none;
  border-left: none;
  padding: ${(props) => props.padding ?? '12px 12px'};
  background: ${(props) => props.background ?? '#ffffff'};
  border: ${(props) => props.border ?? 'solid 2px #f5f7fa'};
`;

export const DemoBlock: FC<Props> = (props) => {
  return (
    <Container style={props.style}>
      <Title>{props.title}</Title>
      <Content {...pick(props, ['background', 'padding', 'border'])}>
        {props.children}
      </Content>
    </Container>
  );
};

DemoBlock.defaultProps = {
  padding: '12px 12px',
  background: '#ffffff',
};
